<template>
  <div>
    <!-- <div class="title">
      <a href>返回</a>
      <p>修改信息</p>
    </div>-->
    <van-nav-bar title="修改信息" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.username"
        name="user_name"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        readonly
        clickable
        name="area"
        :value="user.addr"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
      </van-popup>

      <van-field
        readonly
        clickable
        name="sex"
        label="性别"
        :value="user.sex"
        placeholder="选择性别"
        @click="riqi = true"
      />
      <van-popup v-model="riqi" round position="bottom">
        <van-picker show-toolbar :columns="sex" @cancel="riqi = false" @confirm="onsex" />
      </van-popup>

      <van-field name="uploader" ref="up" label="文件上传">
        <template #input>
          <van-uploader v-model="user.img" :max-count="1" />
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import areaList from "./area";
import { getUser } from "@/utils/auth"; //引入cookie方法
import userApi from "@/api/userApi";
// import areaData from "./area.js";
// import { AddressEdit } from "vant";

export default {
  data() {
    return {
      user: {
        username: "",
        addr: "",
        sex: "",
        img: []
      },
      sex: ["男", "女"],
      valuesex: "",
      riqi: false,
      value: "",
      areaList,
      showArea: false,

      phone: "",
      value: "",
      showPicker: false,
      uploader: []
    };
  },

  components: {},

  methods: {
    onClickLeft() {
      // Toast("666");
      this.$router.push("/my");
    },

    //进入页面拿到用户信息

    onsex(value) {
      this.user.sex = value;
      this.riqi = false;
    },
    onConfirm(values, event) {
      this.user.addr = values.map(item => item.name).join("/");
      this.showArea = false;
    },

    onSubmit(values) {
      let form1 = new FormData();
      form1.append("username", this.user.username);
      form1.append("sex", this.user.sex);
      form1.append("addr", this.user.addr);
      if (this.$refs.up.formValue.length) {
        form1.append("avatar", this.$refs.up.formValue[0].file);

        form1.append("fileNames", this.$refs.up.formValue[0].file.name);
      }
      console.log("submit", values);
      let d = getUser();
      let id = JSON.parse(d).id;
      userApi.editUser(id, form1).then(
        res => {
          console.log(res.data);
          if (res.data.flag) {
            this.$toast("修改成功", 1000);

            setTimeout(() => {
              this.$router.push("/my");
            }, 1000);
          } else {
            this.$toast("修改失败", 1000);
          }
        },
        err => {
          console.log("err");
        }
      );
    },
    validator(val) {
      return /1\d{10}/.test(val);
    }
  }
};
</script>

<style scoped>
/* .title {
  position: relative;
  height: 0.4rem;
  font-size: 0.16rem;
  /* font-weight: 31.25rem; 
  background: pink;
  display: flex;
}
.title a {
  font-size: 0.14rem;
  color: #333;
}
.title p {
  margin-left: 1rem; 
}*/
</style>